<template>
    <div class="update">
        <div class="item">
            <div class="label">活动支持人数：</div>
            <div class="name">
                {{scene.maxPerson}}人
            </div>
        </div>
        <div class="item">
            <div class="label">增加人数：</div>
            <div class="name">
                <el-input style="width: 150px;margin-right: 10px" v-model="updateNum" @input="inputNumber"
                          maxLength="5"></el-input>
                <span style="font-size: 12px;color: #999999">费用标准：{{personPrice}}元/人</span>
            </div>
        </div>
        <div class="item">
            <div class="label">升级后支持人数：</div>
            <div class="name">
                {{Number(scene.maxPerson) + Number(updateNum)}}
            </div>
        </div>
        <div class="item">
            <div class="label">需支付：</div>
            <div class="name">
                <span style="font-size: 25px;color:#ff0000;">￥&nbsp;{{(updateNum*personPrice).toFixed(2)}}</span>
            </div>
        </div>
        <div style="text-align: center;margin: 30px 0 20px">
            <el-button style="width: 100px" type="info" @click="closeModal">取消</el-button>
            <el-button style="width: 100px" type="primary" @click="upDatePeopleNum">确认</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'updatePersonNum',
        data() {
            return {
                maxPerson: '',
                updateNum: '',
                personPrice: '',
            };
        },
        props: {
            scene: {
                required: true,
            },
            closeModal: {
                required: true,
            },
            getSceneList: {},
        },
        mounted() {
            let info = sessionStorage.getItem('member');
            if (info && JSON.parse(info)) {
                this.personPrice = JSON.parse(info).personPrice;
            }
        },
        methods: {
            upDatePeopleNum() {
                if(this.updateNum<=0){
                    this.$message.info('请输入增加人数');
                    return false;
                }
                let param = {
                    title: '场景人数升级',
                    type: 4,
                    totalPrice: this.updateNum * this.personPrice.toFixed(2),
                    finalPrice: this.updateNum * this.personPrice.toFixed(2),
                    detail: {
                        sceneId: this.scene.sceneId,
                        payPersonNum: this.updateNum,
                        personPrice: this.personPrice,
                    },
                };
                this.$api.post('/order/add', param, success => {
                    console.log('order--Pay', success);
                    if (success) {
                        this.$bus.$emit('orderPay', success);
                        this.closeModal();
                    } else {
                        this.$message.error('订单号为空');
                    }
                }, fal => {
                    this.$message.error(fal);
                });
            },
            inputNumber() {
                this.updateNum = this.updateNum.replace(/[^0-9]/g, '');
            },
        },
    };
</script>

<style scoped lang="scss">
    .update {
        .item {
            margin: 20px 0;
            @include flex;
            font-size: 14px;
            .label {
                margin-right: 10px;
                width: 140px;
                text-align: right;
            }
            .name {
                width: calc(100% - 150px);
            }
        }
    }
</style>